<template>
  <div class="service">
    <div class="service_product">
      <div class="service_title" style="">服务产品</div>
      <div style="border-bottom: 1px solid #ccc;width: 920px;"></div>
      <div style="margin-top: 20px">
        <div v-for="item in list" class="service_product_item">
          <div style="font-size: 18px;color: rgb(68, 68, 68);padding: 10px">
            {{item.title}}
          </div>
          <div>
            <img src="../../assets/img/service_product_line.png"/>
          </div>
          <div style="font-size: 16px; color: rgb(176, 175, 175);">
            {{item.title_sub}}
          </div>
          <div>
            <img :src="item.img"/>
          </div>
        </div>
      </div>
    </div>
    <div class="service_customer_p">
      <service-customer></service-customer>
    </div>
  </div>
</template>
<script>
  import ServiceCustomer from './service_customer.vue'
  export default {
    name: 'ServeiceProducts',
    components: {ServiceCustomer},
    data () {
      return {
        list: [
          {
            title: 'E房贷',
            title_sub: '按揭房可贷款，轻松帮您解决当前问题',
            img: require('../../assets/img/service_product_1.png')
          },
          {
            title: 'E房贷',
            title_sub: '按揭房可贷款，轻松帮您解决当前问题',
            img: require('../../assets/img/service_product_2.png')
          },
          {
            title: 'E房贷',
            title_sub: '按揭房可贷款，轻松帮您解决当前问题',
            img: require('../../assets/img/service_product_3.png')
          },
          {
            title: 'E信贷',
            title_sub: '按揭房可贷款，轻松帮您解决当前问题',
            img: require('../../assets/img/service_product_4.png')
          }
        ]
      }
    }
  }
</script>
<style lang="scss" scoped>
  .service{
    width: 1440px;
    height: 420px;
    border: 1px solid transparent;
    .service_product{
      width: 920px;
      height: 420px;
      margin-left: 100px;
      float: left;
      .service_title{
        color: #009fe9;
        font-size: 16px;
        border-bottom: 4px solid #009fe9;
        width: 100px;
        height:60px;
        line-height: 60px;
        text-align: center;
      }
      .service_product_item{
        width: 207px;
        height: 297px;
        float: left;
        padding: 10px;
      }
    }
    .service_customer_p{
      float: left;
      width:270px;
      height: 420px;
    }
  }
</style>
